<template>
  <el-card class="tool-card" shadow="hover" @click="goToToolDetail">
    <div class="tool-icon">
      <img v-if="tool.icon" :src="tool.icon" :alt="tool.name" />
      <el-icon v-else><Tools /></el-icon>
    </div>
    <div class="tool-info">
      <h3>{{ tool.name }}</h3>
      <p class="category">{{ tool.category.name }}</p>
      <p class="description">{{ truncatedDescription }}</p>
    </div>
  </el-card>
</template>

<script>
import { Tools } from '@element-plus/icons-vue'

export default {
  name: 'ToolCard',
  components: {
    Tools
  },
  props: {
    tool: {
      type: Object,
      required: true
    }
  },
  computed: {
    truncatedDescription() {
      if (!this.tool.description) return ''
      return this.tool.description.length > 100
        ? this.tool.description.substring(0, 100) + '...'
        : this.tool.description
    }
  },
  methods: {
    goToToolDetail() {
      console.log('Navigating to tool detail with ID:', this.tool.id)
      this.$router.push({ 
        name: 'ToolDetail', 
        params: { id: this.tool.id },
        props: { id: this.tool.id }
      })
    }
  }
}
</script>

<style scoped>
.tool-card {
  cursor: pointer;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s;
}

.tool-card:hover {
  transform: translateY(-5px);
}

.tool-icon {
  text-align: center;
  margin-bottom: 15px;
}

.tool-icon img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.tool-icon .el-icon {
  font-size: 48px;
  color: #409EFF;
}

.tool-info {
  flex: 1;
}

.tool-info h3 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #303133;
}

.category {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.description {
  font-size: 14px;
  color: #606266;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
</style> 